<template>
  <div class="pie-box">
    <div class="pie" ref="pie"></div>
    <h2> {{this.tit}} </h2>
  </div>
</template>

<script>
// 引入 ECharts 主模块
 import echarts from 'echarts/lib/echarts'
// 引入柱状图
import 'echarts/lib/chart/pie'
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
export default {
  name: "pie",
  data(){
    return{

    }
  },
  props:['flag','val','tit'],
  mounted() {
    this.initCircle()
  },
  methods: {
    initCircle() {
      let data = [];
      if(this.flag){
        data.push({value: this.val, name: `${this.val}%`})
        data.push({value: 100-this.val, name: ``})
      }else{
        data.push({value: 0, name: this.val})
        data.push({value: this.val-this.val, name: ``})
      }


      let myChart = echarts.init(this.$refs.pie);
      // 绘制图表
      myChart.setOption({
        color: ['rgb(102,208,113)', 'rgb(223, 223, 223)'],
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        
      // legend: {
      //   orient: 'vertical',
      //   x: 'left',
      //   data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
      // },
      series: [
        {
          name:'销量绩效',
          type:'pie',
          radius: ['80%', '90%'],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: true ,
              position: 'center'
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '30',
                fontWeight: 'bold'
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data,
       
        }
      ]
      });
    }
  },
  
}
</script>

<style lang="scss" scoped>
  .pie-box{
    width: px2rem(200);
    height: px2rem(230);

    text-align: center;
    .pie{
    width: px2rem(200);
    height: px2rem(200);
    }
    h2{
      line-height: px2rem(30);
      font-size: px2rem(30);
    }
  }
</style>

